<template>
	<view>
		<view class="row a-a">备注：新用户默认密码为手机号后6位</view>
		<view class="row b-b">
			<text class="tit">手机号</text>
			<input
				type="text"
				:value="userInfo.mobile"
				placeholder="手机号"
				placeholder-class="input-empty"
				maxlength="11"
				data-key="mobile"
				style="height:32px"
				disabled
			/>
		</view>
		<view class="row b-b">
			<text class="tit">旧密码</text>
			<input
				type="number"
				value=""
				placeholder="旧密码,6位数字"
				placeholder-class="input-empty"
				maxlength="6"
				password
				data-key="oldpassword"
				@input="inputChange"
				style="height:32px"
			/>
		</view>
		<view class="row b-b">
			<text class="tit">新密码</text>
			<input
				type="number"
				value=""
				placeholder="新密码,6位数字"
				placeholder-class="input-empty"
				maxlength="6"
				password
				data-key="password"
				@input="inputChange"
				style="height:32px"
			/>
		</view>
		<view class="row b-b">
			<text class="tit">确认新密码</text>
			<input
				type="number"
				value=""
				placeholder="确认新密码,6位数字"
				placeholder-class="input-empty"
				maxlength="6"
				password
				data-key="confirmpassword"
				@input="inputChange"
				style="height:32px"
			/>
		</view>
		
		<view class="submit-con">
			<button class="submit-btn" @click="toSubmit" :disabled="submiting">提交修改</button>
		</view>
	</view>
</template>

<script>
import { serveraddress } from '@/utils/serverUrl';

export default {
	data() {
		return {
			token: '',
			imageList: [],
			
			userInfo: {},
			oldpassword:'',
			password:'',
			confirmpassword:'',
			
			submiting: false
		};
	},
	onLoad() {
		this.token = this.$api.get('token');
		if (!this.token) {
			uni.navigateTo(`/pages/public/login`);
		}
		
	},
	onShow() {
		this.token = this.$api.get('token');
		if (!this.token) {
			uni.navigateTo(`/pages/public/login`);
		}
		//获取用户信息
		this.getmedate();
		
	},
	methods: {
		//复制input的值
		inputChange(e) {
			const key = e.currentTarget.dataset.key;
			this[key] = e.detail.value;
		},

		//获取用户信息
		async getmedate() {
			console.log('/pages/user/user');
			const param_userinfo = {
				token: this.token
			};
			console.log('User/userinfo', param_userinfo);
			await this.$http.request('User', 'userinfo', 'GET', param_userinfo, res => {
				console.log('User/userinfo', res);
				if (res.status == 1) {
					if (res.data.error == 0) {
						console.log('userinfo', res.data.data);
						this.userInfo = res.data.data;
					}
				}
			});
		},
		
		//提交修改
		toSubmit() {
			let _this = this;
			
			this.submiting = true;
			const { oldpassword,password,confirmpassword } = this;

			/* 数据验证模块*/
			let regex = /([0-9]{6}$)/;
			if (!regex.test(oldpassword)) {
				this.$helper.toast('旧密码输入6位');
				this.submiting = false;
				return;
			}
			
			if (!regex.test(password)) {
				this.$helper.toast('新密码输入6位');
				this.submiting = false;
				return;
			}
			
			if (!regex.test(confirmpassword)) {
				this.$helper.toast('确认新密码输入6位');
				this.submiting = false;
				return;
			}
			
			const param = {
				token: this.token,
				oldpassword: oldpassword,
				password: password,
				confirmpassword: confirmpassword,
			};
			
			
			uni.showModal({
				title: '提示',
				content: '修改用户支付密码',
				success: function(res) {
					if (res.confirm) {
						console.log('用户点击确定');
						_this.submiting = false;
						
						_this.$http.request('User', 'passwordpaychange', 'POST', param, res => {
							_this.submiting = false;
							if (res.status == 1) {
								if (res.data.error == 0) {
									// 提示信息
									_this.$helper.toast(res.data.msg, 'sucess');
									//返回前一页
									setTimeout(() => {
										uni.navigateTo({
											url: `/pages/set/set`
										});
									}, 1000);
								}
							}
						});
						
					} else if (res.cancel) {
						console.log('用户点击取消');
						_this.submiting = false;
					}
				}
			});	
			
		}

	}
};
</script>

<style lang="scss">
.row {
	display: flex;
	align-items: center;
	position: relative;
	padding: 0 30upx;
	height: 110upx;
	background: #fff;
	
	.tit {
		flex-shrink: 0;
		width: 180upx;
		font-size: 30upx;
		color: $font-color-dark;
	}
	input {
		flex: 1;
		font-size: 30upx;
		color: $font-color-dark;
	}
}

.a-a{
	color: $uni-color-primary;
}

.user-section {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 460upx;
	padding: 40upx 30upx 0;
	position: relative;
	.bg {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		filter: blur(1px);
		opacity: 0.7;
	}
	.portrait-box {
		width: 200upx;
		height: 200upx;
		border: 6upx solid #fff;
		border-radius: 50%;
		position: relative;
		z-index: 2;
	}
	.portrait {
		position: relative;
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}
	.yticon {
		position: absolute;
		line-height: 1;
		z-index: 5;
		font-size: 30upx;
		color: #fff;
		padding: 4upx 6upx;
		border-radius: 6upx;
		background: rgba(0, 0, 0, 0.4);
	}
	.pt-upload-btn {
		width: 190upx;
		left: 0;
		top: 80upx;
		text-align: center;
	}
	.bg-upload-btn {
		width: 100%;
		text-align: center;
		line-height: 60upx;
		left: 0upx;
		bottom: 16upx;
	}
}

/* submit-con */
.submit-con {
	margin-top: 20upx;

	.submit-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 80upx;
		font-size: $font-lg;
		color: #fff;
		background-color: $base-color;
		border-radius: 10upx;
		box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
	}

	.getinfo-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 80upx;
		margin-top: 30upx;
		font-size: $font-lg;
		color: #fff;
		background-color: $uni-color-success;
		border-radius: 10upx;
		box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
	}
}
</style>
